// 加载动画组件
const LoadingScreen = {
    template: `
        <div class="loading-screen">
            <div class="loading-content">
                <div class="loading-spinner"></div>
                <div class="loading-text"></div>
            </div>
        </div>
    `,

    style: `
        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
            transition: opacity 0.3s ease;
        }

        .loading-content {
            text-align: center;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #4776E6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 16px;
        }

        .loading-text {
            color: #4776E6;
            font-size: 16px;
            font-weight: 500;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-screen.fade-out {
            opacity: 0;
        }
    `,

    init() {
        // 创建样式
        const style = document.createElement('style');
        style.textContent = this.style;
        document.head.appendChild(style);
    },

    show(text = '加载中...') {
        // 创建加载屏幕
        const div = document.createElement('div');
        div.innerHTML = this.template;
        const loadingScreen = div.firstElementChild;
        
        // 设置文本
        loadingScreen.querySelector('.loading-text').textContent = text;
        
        // 添加到页面
        document.body.appendChild(loadingScreen);
        
        return loadingScreen;
    },

    hide(loadingScreen) {
        if (!loadingScreen) return;
        
        // 添加淡出动画
        loadingScreen.classList.add('fade-out');
        
        // 动画结束后移除元素
        setTimeout(() => {
            loadingScreen.remove();
        }, 300);
    }
};

// 初始化加载动画组件
LoadingScreen.init(); 